<template>
  <div class="image-player">
    <div class="show-image">
      <video controls :src="video" v-if="video && showVideo"></video>
      <pic-zoom :url="banners[showImage].url" v-else></pic-zoom>
    </div>

    <div class="thumb-list swiper-container">
      <div class="swiper-wrapper">
        <div
          class="item swiper-slide"
          :class="{ active: showVideo }"
          v-if="video"
          @click="toVideo(index)"
        >
          <img :src="banners[0].url" alt="" />
        </div>

        <div
          class="item swiper-slide"
          :class="{ active: !showVideo && index == showImage }"
          v-for="(item, index) in banners"
          :key="index"
          @click="toIndex(index)"
          @mouseover="toIndex(index)"
        >
          <img :src="item.url" alt="" />
        </div>
      </div>
      <div class="prev" @click="prev">
        <icon name="iconxiangyoubeifen16" size="14" />
      </div>
      <div class="next" @click="next">
        <icon name="iconxiangyoubeifen16" size="14" />
      </div>
    </div>
  </div>
</template>

<script>
import PicZoom from "../PicZoom.vue";
import Swiper from "swiper";
import "swiper/swiper.min.css";

export default {
  name: "ImagePlayer1",
  props: {
    banners: Array,
    video: String,
  },
  components: { PicZoom },
  data() {
    return {
      showVideo: 0,
      showImage: 0,
      // swiper1: null,
      swiper2: null,
    };
  },
  created() {
    if (this.video) this.showVideo = 1;
  },
  methods: {
    toVideo() {
      this.showVideo = 1;
    },
    toIndex(index) {
      this.showVideo = 0;
      this.showImage = index;
      this.swiper2.slideTo(index);
    },
    next() {
      if (this.showImage == this.banners.length - 1) {
        this.toIndex(0);
      } else {
        this.toIndex(++this.showImage);
      }
    },
    prev() {
      if (this.showImage == 0) {
        this.toIndex(this.banners.length - 1);
      } else {
        this.toIndex(--this.showImage);
      }
    },
  },
  mounted() {
    // this.swiper1 = new Swiper(".show-image");
    this.swiper2 = new Swiper(".thumb-list", {
      slidesPerView: 5,
      spaceBetween: 16,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  },
};
</script>

<style lang="scss" scoped>
.image-player {
  width: 440px;
  .show-image {
    height: 440px;
    width: 440px;
    background: #000;
    video {
      width: 100%;
      height: 100%;
    }
  }
  .thumb-list {
    padding: 10px 34px;
    .prev,
    .next {
      position: absolute;
      width: 30px;
      height: 62px;
      top: 10px;
      left: 0px;
      background: #fff;
      color: #979797;
      z-index: 9;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .prev {
      transform: rotate(180deg);
    }
    .next {
      left: auto;
      right: 0;
    }
    .item {
      width: 62px;
      height: 62px;
      opacity: 0.4;
      &.active {
        opacity: 1;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
